<template>
  <div class="app-container">
    <div class="filter-container">
      <el-page-header @back="$router.go(-1)" class="backUp" :content="id?'编辑':'新增'"></el-page-header>
    </div>
    <!-- <div slot="title" class="dialog-title">{{id?'编辑':'新增'}}</div> -->
      <el-form :ref="formName" :model="formFieldsData" :rules="rules" label-width='100px' :label-position="labelPosition">
        <el-form-item label="上级类型：" prop="type_id">
          <el-select v-model="formFieldsData.type_id" placeholder="请选择">
            <el-option
              v-for="item in parentOptions"
              :key="item.id"
              :label="item.type_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="属性名称：" prop="value_name">
          <el-input v-model="formFieldsData.value_name" clearable />
        </el-form-item>
        <el-form-item label="属性key：" prop="value_key">
          <el-input v-model="formFieldsData.value_key" clearable />
        </el-form-item>
        <el-form-item label="属性值类型：">
          <el-radio-group v-model="formFieldsData.value_type">
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1">上传图片</el-radio>
            <el-radio :label="2">选择地址</el-radio>
            <el-radio :label="3">输入框</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="formFieldsData.value_type==1">
          <div v-for="item in value_type_param_img">
            <el-form-item label="上传名称：" prop="update_name">
              <el-input v-model="item.update_name" clearable />
            </el-form-item>
            <el-form-item label="图片类型：">
              <el-radio-group v-model="item.page_type">
                <el-radio :label="0">无</el-radio>
                <el-radio :label="1">正面</el-radio>
                <el-radio :label="2">副面</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否必填：">
              <el-switch
                v-model="item.is_require"
                :active-value="1"
                :inactive-value="0"
                class="switch_btn"
              />
            </el-form-item>
          </div>
          <el-button type="primary" @click="addOne" size='mini'>增加</el-button>
        </template>
        <template v-if="formFieldsData.value_type==2">
          <el-form-item label="联动类型：" prop="area_type">
            <el-select v-model="value_type_param_addr.area_type" placeholder="请选择">
              <el-option key="1" label="一级联动" value="1"></el-option>
              <el-option key="2" label="二级联动" value="2"></el-option>
              <el-option key="3" label="三级联动" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择数量：" prop="num">
            <el-input v-model="value_type_param_addr.num" type="number" clearable />
          </el-form-item>
          <el-form-item label="是否必填：">
            <el-switch
              v-model="value_type_param_addr.is_require"
              :active-value="1"
              :inactive-value="0"
              class="switch_btn"
            />
          </el-form-item>
        </template>
        <el-form-item label="显示状态：">
          <el-radio-group v-model="formFieldsData.show_type">
            <el-radio :label="0">全部</el-radio>
            <el-radio :label="1">司机</el-radio>
            <el-radio :label="2">非司机</el-radio>
            <el-radio :label="3">企业</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="formFieldsData.sort" type="number" clearable class="flex1"/>
        </el-form-item>
        <el-form-item label="是否自定义：">
          <el-switch
            v-model="formFieldsData.is_custom"
            :active-value="1"
            :inactive-value="0"
            class="switch_btn"
          />
        </el-form-item>
        <el-form-item label="排序：">
          <el-button @click="handleCancel" size='medium'>取 消</el-button>
          <el-button type="primary" @click="handleSubmit" size='medium'>确 定</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
import {getTagAllData} from '@/api/talent.js'
export default {
  data() {
    return {
      url:'/profession/admin/tagValue',
      parentOptions:[],
      formName: 'talentsAttr',
      formVisible:false,
      labelPosition:'left', // 表单label对齐方式
      id:'',
      formFieldsData: {
        type_id:'',
        value_name: '',
        show_type: 0,
        sort: 0,
        value_type:0,
        value_type_param:'',
        is_custom:'',
        value_key:'',
      },
      value_type_param_img:[],
      param_img:{
        update_name:'',
        update_type:0,
        page_type:0,
        is_require:0
      },
      value_type_param_addr:{
        is_require:0,
        area_type:'',
        num:1
      },
      // 验证规则
      rules: {
        type_id: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        value_name: [
          { required: true, message: '请输入类型名称', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        value_key: [
          { required: true, message: '请输入类型标记', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    let type_id = this.$route.query.type_id
    if (type_id) {
      this.formFieldsData.type_id = parseInt(type_id)
    }
    let id = this.$route.query.id
    if (id) {
      this.id = id
      this.$http.get(this.url+'/'+this.id).then(response => {
        if (response.code == 10000) {
          let data = response.data
          this.formFieldsData.type_id = parseInt(data.type_id)
          this.formFieldsData.value_name = data.value_name
          this.formFieldsData.show_type = data.show_type
          this.formFieldsData.sort = data.sort
          this.formFieldsData.value_type = data.value_type
          this.formFieldsData.is_custom = data.is_custom
          this.formFieldsData.value_key = data.value_key
          if (this.formFieldsData.value_type == 1) {
            this.value_type_param_img = JSON.parse(data.value_type_param)
          } else if (this.formFieldsData.value_type == 2) {
            this.value_type_param_addr = JSON.parse(data.value_type_param)
          }
        }
      })
    }
    this.value_type_param_img = [this.param_img]
    this.getTagAllData()
  },
  methods:{
    // 获取所有类型
    getTagAllData() {
      getTagAllData().then(res=>{
        this.parentOptions = res.data
      })
    },
    // 取消
    handleCancel() {
      this.$refs[this.formName].resetFields()
      this.$router.go(-1)
    },
    // 商品图片添加
    addOne() {
      this.value_type_param_img.push(this.param_img)
    },
    // 新增和修改
    handleSubmit() {
      this.$refs[this.formName].validate((valid) => {
        if (valid) {
          let param = {...this.formFieldsData}
          if (param.value_type == 1) {
            let value_type_param_img = []
            this.value_type_param_img.forEach(res=>{
              if (res.update_name!='') {
                value_type_param_img.push(res)
              }
            })
            if (value_type_param_img.length == 0) {
              this.$message('上传名称不能为空')
              return
            }
            param.value_type_param = JSON.stringify(this.value_type_param_img)
          } else if (param.value_type == 2) {
            if (this.value_type_param_addr.area_type == '') {
              this.$message('联动类型不能为空')
              return
            }
            param.value_type_param = JSON.stringify(this.value_type_param_addr)
          }
          if (!this.id) {
            this.$http.post(this.url, param).then(response => {
              this.handleResponse(response)
            })
          } else {
            this.$http.put(this.url + '/' + this.id, param).then((response) => {
              this.handleResponse(response)
            })
          }
        } else {
          return false
        }
      })
    },
    // 新增和修改后的回调
    handleResponse(response) {
      if (response.code === 10000) {
        this.$message.success(`${this.id?'修改':'添加'}成功`)
        this.$refs[this.formName].resetFields()
        Object.keys(this.formFieldsData).forEach((k) => {
          if (k=='show_type'||k=='sort'||k=='value_type') {
            this.formFieldsData[k] = 0
          } else {
            this.formFieldsData[k] = ''
          }
        })
        this.value_type_param_img = [this.param_img]
        Object.keys(this.value_type_param_addr).forEach((k) => {
          if (k=='is_require') {
            this.formFieldsData[k] = 0
          } else if (k == 'num') {
            this.formFieldsData[k] = 1
          } else {
            this.formFieldsData[k] = ''
          }
        })
        if (this.id) {
          this.$router.go(-1)
        }
      } else if (response.code == 10003){
        this.$message.error('您当前登录账号暂无操作权限')
      } else {
        this.$message.error(response.message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-input,.el-select{
    width: 400px;
  }
</style>